<template>
    <!-- 登录容器-->
    <view class="login">
        <!-- 上 -->
        <view class="header">
            <!-- 图片标签-->
            <image class="headerbg" src="../../static/images/loginbg.png"></image>
            <view class="desc">
                <view>
                    <text>您好，</text>
                    <text>欢迎登录车辆网！</text>
                </view>
                <image src="../../static/images/loginbgperson.png" mode=""></image>
            </view>
        </view>
        <!-- 下 -->
        <view class="main">
            <form>
                <input type="text" placeholder="手机号登录"/>
                <input type="text" placeholder="输入验证码"/>
                <button class="sendCode">发送验证码</button>
                <button class="doLogin">登录</button>
            </form>
        </view>
    </view>
</template>

<script>
    export default {
        // 初始化当前页面数据
        data() {
            return {
                
            }
        },
        // 代码块
        methods: {
            onClick: function(){
                // console.log("登录成功！")
                uni.navigateTo({
                    url: "/pages/index/index"
                })
            }
        }
    }
</script>

<style>
.headerbg{
    width: 100%;
    height: 210px;
}
.desc{
    width: 80%;
    /* 绝对定位 */
    position: absolute;
    top: 115px;
    left: 58px;
    /* background-color: pink; */
    /* 把当前标签容器设置为弹性容器 */
    display: flex;
    /* 控制内部的子标签，第一个和最后一个在容器的两端展示 */
    justify-content: space-between;
}
/* 后代选择器 */
/* 获取页面中class="desc"的标签内部的 标签名为image的标签 */
.desc image{
    width: 140px;
    height: 117px;
    /* 基线对齐方式*/
    vertical-align: top;
    position: relative;
    /* 改变层级 */
    z-index: 8;
}
.desc view text:nth-child(1){
    font-size: 28px;
    color: #fff;
}
.desc view text:nth-child(2){
    /* 把当前标签转为块标签，独占一行 */
    display: block;
    color: #fff;
    /* 设置外边距两个标签（上边和下边）之间的距离 */
    margin-top: 10px;
    font-size: 18px;
}

.main{
    background-color: #fff;
    width: 100%;
    height: 400px;
    /* 相对定位 */
    position: relative;
    top: -17px;
    
    border-radius: 20px 20px 0px 0px;
}
.sendCode{
    width: 100px;
    border-radius: 22px;
    font-size: 13px;
    background-color: #4c8efe;
    color: #fff;
}
.doLogin{
    width: 85%;
    border-radius: 20px;
    line-height: 43px;
    color: #fff;
    background: linear-gradient(to right, #3788ff, #0762e6);
}
</style>
